<template>
	<view class="cooperation-personal-container">
		<view class="topTip">
			个人资料
		</view>
		<uni-forms :modelValue="formData" class='formMy'>
			<uni-forms-item label="真实姓名：" name="name" class='lables' :label-width='150'>
				<uni-easyinput :clearable="false" :inputBorder="false" type="text" v-model="formData.name"
					:styles="styles" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="曾用名：" name="name" :label-width='150'>
				<uni-easyinput :clearable="false" :inputBorder="false" type="text" v-model="formData.name"
					placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="身份证号码：" name="name" :label-width='150'>
				<uni-easyinput :clearable="false" :inputBorder="false" type="text" v-model="formData.name"
					placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="护照号：" name="name" :label-width='150'>
				<uni-easyinput :clearable="false" :inputBorder="false" type="text" v-model="formData.name"
					placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="性别：" name="name" :label-width='150'>
				<uni-easyinput :clearable="false" :inputBorder="false" type="text" v-model="formData.name"
					placeholder="请输入" />
			</uni-forms-item>

			<uni-forms-item label="单位简介：" label-position="top" name="name" :label-width='400'>
				<uni-easyinput type="textarea" height='200' class='textareas' :styles="styles"
					placeholderStyle="text-align:left" v-model="formData.name" placeholder="请输入" />
				<view class="num">1/200</view>
			</uni-forms-item>
			<uni-forms-item label="业务范围：" label-position="top" name="name" :label-width='400'>
				<uni-easyinput type="textarea" height='200' class='textareas' :styles="styles"
					placeholderStyle="text-align:left" v-model="formData.name" placeholder="请输入" />
				<view class="num">1/200</view>
			</uni-forms-item>
			<view class="topTip">
				资料上传
			</view>
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item>
					<view class="pic">
						<uni-file-picker limit="1" :del-icon="false" disable-preview file-mediatype="image">
							<img src="" alt="">
						</uni-file-picker>
					</view>
					<text class="textPic">登记照</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="pic">
						<uni-file-picker limit="1" :del-icon="false" disable-preview file-mediatype="image">
							<img src="" alt="">
						</uni-file-picker>
					</view>
					<text class="textPic">执业证</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="pic">
						<uni-file-picker limit="1" :del-icon="false" disable-preview file-mediatype="image">
							<img src="" alt="">
						</uni-file-picker>
					</view>
					<text class="textPic">人脸拍照识别</text>
				</uni-grid-item>
			</uni-grid>
			<uni-data-checkbox class='checkBoxClass' multiple v-model="formData.checkbox1" :localdata="arrgesData">
			</uni-data-checkbox>
			<button type="primary" class="submitBtn">提交注册</button>
		</uni-forms>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				styles: {
					"textAlign": "end",
					"border": 0
				},
				styles: {
					color: '#2979FF',
					// borderColor: '#2979FF !important'
				},
				formData: {
					name: '',
					hobby: ''
				},
				arrgesData: [{
					text: ' 提交即视为您已同意《合作单位协议书》',
					value: 0
				}]
			};
		},
		methods: {
			onSubmit(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.cooperation-personal-container {
		line-height: 1;
	}

	.topTip {
		height: 77rpx;
		line-height: 77rpx;
		background-color: #F6F6F6;
		color: #000000;
		font-size: 28rpx;
		padding-left: 22rpx;
	}

	.formMy {
		padding: 0 20rpx;
		box-sizing: border-box;

	}

	.uni-easyinput__placeholder-class {
		text-align: end;
	}

	.uni-input-input {
		text-align: end;
	}

	.uni-input-form,
	.uni-input-wrapper {
		text-align: end;
	}

	.textareas {
		position: relative;
		height: 200rpx;
	}

	.num {
		position: absolute;
		bottom: 20rpx;
		right: 10rpx;
	}

	.pic {
		width: 260rpx;
		height: 150rpx;
		background: #F8F8F8;
		border-radius: 6rpx;
		// padding-top: 35rpx;
		box-sizing: border-box;
		margin-top: 33rpx;

		.file-picker__box {
			text-align: center;
			width: 100%;
		}

		.uni-file-picker {
			width: 100%;
			height: 100%;
		}
	}

	.textPic {
		color: #999999;
		padding-top: 23rpx;
		text-align: center;
		width: 260rpx;
	}

	.checkBoxClass {
		padding-top: 90rpx;
	}

	.submitBtn {
		width: 705rpx;
		height: 88rpx;
		background: #53B3D9;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88rpx;
	}


	.uni-highlight {
		&:active {
			background-color: transparent;
		}
	}
</style>
